<template>
  <view class="p-[32rpx] bg-[#f5f5f5] min-h-screen">
    <view class="text-[36rpx] font-bold text-center mb-[32rpx]">任务状态系统示例</view>
    
    <!-- 状态切换控制 -->
    <view class="bg-white rounded-[16rpx] p-[24rpx] mb-[24rpx] shadow-sm">
      <view class="text-[28rpx] font-bold mb-[16rpx]">状态控制</view>
      <view class="flex flex-wrap gap-[12rpx]">
        <nut-button 
          v-for="status in Object.values(TASK_STATUS)" 
          :key="status"
          :type="currentTaskStatus === status ? 'primary' : 'default'"
          size="small"
          @click="currentTaskStatus = status"
        >
          {{ getStatusConfig(status, 'task')?.label || status }}
        </nut-button>
      </view>
      
      <view class="mt-[16rpx] text-[24rpx] text-[#666]">
        用户角色：
        <nut-button 
          :type="currentUserRole === USER_ROLE.PUBLISHER ? 'primary' : 'default'"
          size="small"
          @click="currentUserRole = USER_ROLE.PUBLISHER"
        >
          发布方
        </nut-button>
        <nut-button 
          :type="currentUserRole === USER_ROLE.APPLICANT ? 'primary' : 'default'"
          size="small"
          @click="currentUserRole = USER_ROLE.APPLICANT"
        >
          接单人
        </nut-button>
      </view>
    </view>

    <!-- 任务列表 -->
    <view class="space-y-[24rpx]">
      <RewardTaskItem
        v-for="task in taskList"
        :key="task.id"
        :item="task"
        @cancelTask="handleCancelTask"
        @viewApplicants="handleViewApplicants"
        @selectWinner="handleSelectWinner"
        @viewProgress="handleViewProgress"
        @confirmCompletion="handleConfirmCompletion"
        @raiseDispute="handleRaiseDispute"
        @communicatePlatform="handleCommunicatePlatform"
        @acceptSolution="handleAcceptSolution"
        @rejectSolution="handleRejectSolution"
        @deleteTask="handleDeleteTask"
        @applyTask="handleApplyTask"
        @cancelApplication="handleCancelApplication"
        @startTask="handleStartTask"
        @abandonTask="handleAbandonTask"
        @submitCompletion="handleSubmitCompletion"
        @waitConfirmation="handleWaitConfirmation"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { Button as nutButton } from "@nutui/nutui-taro";
import Taro from "@tarojs/taro";
import RewardTaskItem from "./RewardTaskItem.vue";
import { 
  TASK_STATUS, 
  APPLICANT_STATUS, 
  PUBLISHER_STATUS, 
  USER_ROLE,
  getStatusConfig 
} from "@/constants/taskStatus";

// 当前状态
const currentTaskStatus = ref(TASK_STATUS.PAID);
const currentUserRole = ref(USER_ROLE.PUBLISHER);

// 模拟任务数据
const taskList = computed(() => [
  {
    id: 1,
    taskTitle: "设计公司Logo",
    status: "待接取",
    taskStatus: currentTaskStatus.value,
    userRole: currentUserRole.value,
    userStatus: currentUserRole.value === USER_ROLE.PUBLISHER ? PUBLISHER_STATUS.PUBLISHED : APPLICANT_STATUS.APPLIED,
    totalReward: "500.00",
    applyCount: 3,
    desc: "为公司设计一个现代化的Logo，要求简洁大方，体现科技感",
    isUrgent: false,
    pay_status: 1,
    deadline: "2024-01-15",
  },
  {
    id: 2,
    taskTitle: "开发小程序",
    status: "执行中",
    taskStatus: TASK_STATUS.IN_PROGRESS,
    userRole: currentUserRole.value,
    userStatus: currentUserRole.value === USER_ROLE.PUBLISHER ? PUBLISHER_STATUS.CONFIRMED : APPLICANT_STATUS.WORKING,
    totalReward: "2000.00",
    applyCount: 5,
    desc: "开发一个电商小程序，包含商品展示、购物车、支付等功能",
    isUrgent: true,
    pay_status: 1,
    deadline: "2024-01-20",
  },
  {
    id: 3,
    taskTitle: "撰写技术文档",
    status: "已完结",
    taskStatus: TASK_STATUS.COMPLETED,
    userRole: currentUserRole.value,
    userStatus: currentUserRole.value === USER_ROLE.PUBLISHER ? PUBLISHER_STATUS.SETTLED : APPLICANT_STATUS.SUBMITTED,
    totalReward: "800.00",
    applyCount: 2,
    desc: "为API接口编写详细的技术文档，包含接口说明、参数说明、示例代码等",
    isUrgent: false,
    pay_status: 1,
    deadline: "2024-01-10",
  },
  {
    id: 4,
    taskTitle: "翻译英文文档",
    status: "有纠纷",
    taskStatus: TASK_STATUS.DISPUTED,
    userRole: currentUserRole.value,
    userStatus: currentUserRole.value === USER_ROLE.PUBLISHER ? PUBLISHER_STATUS.DISPUTED : APPLICANT_STATUS.DISPUTED,
    totalReward: "300.00",
    applyCount: 1,
    desc: "将英文技术文档翻译成中文，要求专业术语准确，语言流畅",
    isUrgent: true, // 有纠纷的任务标记为紧急
    pay_status: 1,
    deadline: "2024-01-12",
  },
]);

// 事件处理函数
const handleCancelTask = (task) => {
  Taro.showToast({ title: `取消任务: ${task.taskTitle}`, icon: 'none' });
};

const handleViewApplicants = (task) => {
  Taro.showToast({ title: `查看申请者: ${task.taskTitle}`, icon: 'none' });
};

const handleSelectWinner = (task) => {
  Taro.showToast({ title: `选择中标者: ${task.taskTitle}`, icon: 'none' });
};

const handleViewProgress = (task) => {
  Taro.showToast({ title: `查看进度: ${task.taskTitle}`, icon: 'none' });
};

const handleConfirmCompletion = (task) => {
  Taro.showToast({ title: `确认完成: ${task.taskTitle}`, icon: 'none' });
};

const handleRaiseDispute = (task) => {
  Taro.showToast({ title: `提出纠纷: ${task.taskTitle}`, icon: 'none' });
};

const handleCommunicatePlatform = (task) => {
  Taro.showToast({ title: `联系平台: ${task.taskTitle}`, icon: 'none' });
};

const handleAcceptSolution = (task) => {
  Taro.showToast({ title: `接受方案: ${task.taskTitle}`, icon: 'none' });
};

const handleRejectSolution = (task) => {
  Taro.showToast({ title: `拒绝方案: ${task.taskTitle}`, icon: 'none' });
};

const handleDeleteTask = (task) => {
  Taro.showToast({ title: `删除任务: ${task.taskTitle}`, icon: 'none' });
};

const handleApplyTask = (task) => {
  Taro.showToast({ title: `报名任务: ${task.taskTitle}`, icon: 'none' });
};

const handleCancelApplication = (task) => {
  Taro.showToast({ title: `取消报名: ${task.taskTitle}`, icon: 'none' });
};

const handleStartTask = (task) => {
  Taro.showToast({ title: `开始任务: ${task.taskTitle}`, icon: 'none' });
};

const handleAbandonTask = (task) => {
  Taro.showToast({ title: `放弃任务: ${task.taskTitle}`, icon: 'none' });
};

const handleSubmitCompletion = (task) => {
  Taro.showToast({ title: `提交完成: ${task.taskTitle}`, icon: 'none' });
};

const handleWaitConfirmation = (task) => {
  Taro.showToast({ title: `等待确认: ${task.taskTitle}`, icon: 'none' });
};
</script>
